<template>
  <!-- 广告布局容器 -->
  <div class="ad-layout">
    <!-- 流式布局：支持拖拽排序的广告位容器 -->
    <div class="ad-container">
      <!-- vuedraggable组件：提供拖拽排序功能 -->
      <draggable
        v-model="localItems"
        group="adLayout"
        @change="handleChange"
        handle=".drag-handle"
        ghost-class="ghost"
        chosen-class="chosen"
      >
        <!-- 使用v-for渲染广告位列表（Vue 2兼容方式） -->
        <div
          v-for="(item, index) in localItems"
          :key="item.id"
          class="ad-item"
          :class="{
            'layout-one-column': item.layoutType === 'one-column',
            'layout-two-column': item.layoutType === 'two-column',
            'layout-three-column': item.layoutType === 'three-column'
          }"
        >
          <!-- 广告位内容区域 -->
          <div class="ad-content">
            <!-- 拖拽手柄：用户点击此处进行拖拽 -->
            <div class="drag-handle">⋮⋮</div>
            <!-- 广告位标题 -->
            <h3 class="ad-title">{{ item.title }}</h3>
            <!-- 布局类型显示 -->
            <p class="ad-layout-info"> {{ getLayoutName(item.layoutType) }}</p>
            <!-- 当前排序位置 -->
            <p class="ad-index">位置: {{ index + 1 }}</p>
          </div>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
// 导入vuedraggable组件：提供拖拽排序功能
import draggable from 'vuedraggable'

export default {
  // 组件名称
  name: 'DraggableAdLayout',
  // 注册子组件
  components: {
    draggable
  },
  // 定义组件接收的props
  props: {
    /**
     * 广告位配置数组
     * @type {Array<{id: number, title: string, layoutType: string}>}
     * @required
     */
    adItems: {
      type: Array, // 类型为数组
      required: true // 必须提供
    }
  },
  // 组件内部数据
  data() {
    return {
      /**
       * 本地广告位数组：用于vuedraggable的v-model绑定
       * 使用本地副本避免直接修改props
       */
      localItems: []
    }
  },
  // 监听器：监听props变化并同步到本地数据
  watch: {
    /**
     * 监听adItems变化并同步到localItems
     * @param {Array} newItems - 新的广告位数组
     */
    adItems: {
      handler(newItems) {
        // 创建新数组副本，避免引用问题
        this.localItems = [...newItems]
      },
      deep: true, // 深度监听数组内部对象变化
      immediate: true // 组件挂载时立即执行一次
    }
  },
  // 方法定义
  methods: {
    /**
     * 获取布局类型的中文名称
     * @param {string} layoutType - 布局类型字符串 (one-column, two-column, three-column)
     * @returns {string} 布局类型的中文名称
     */
    getLayoutName(layoutType) {
      switch (layoutType) {
        case 'one-column':
          return '一栏'
        case 'two-column':
          return '两栏'
        case 'three-column':
          return '三栏'
        default:
          return '两栏' // 默认返回两栏
      }
    },
    
    /**
     * 处理拖拽变化事件
     * @param {Object} evt - vuedraggable拖拽事件对象
     */
    handleChange(evt) {
      // 只有当排序发生实际变化时（添加、移除或移动元素）才触发更新
      if (evt.added || evt.removed || evt.moved) {
        // 向父组件发送更新事件，传递最新的广告位排序数组
        // 创建数组副本避免引用问题
        this.$emit('update-adItems', [...this.localItems]);
      }
    }
  }
}
</script>

<style scoped>
/* 广告布局容器样式 */
.ad-layout {
  width: 100%; /* 占满父容器宽度 */
}

/* 拖拽布局时，原样式被注释掉 */
/* .ad-container {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
  padding: 5px;
} */

/* vuedraggable特殊处理：针对拖拽布局的流式容器样式 */
/* 注意：这里使用 > div 选择器是因为vuedraggable会生成一个额外的包装div */
.ad-container > div{
  display: flex; /* 弹性布局 */
  flex-wrap: wrap; /* 允许换行 */
  margin: -10px; /* 负外边距抵消子元素的外边距，实现无缝布局 */
  padding: 5px; /* 内边距 */
}

/* 基础广告位样式 */
.ad-item {
  margin: 10px;
  transition: all 0.3s ease;
  cursor: move;
  position: relative;
}

/* 拖拽中的元素样式 */
.ad-item.dragging {
  opacity: 0.5;
  transform: rotate(5deg) scale(1.05);
}

/* 不同布局类型的宽度设置 */
/* 使用calc函数减去外边距以精确控制宽度 */
.layout-one-column {
  width: calc(100% - 20px);
}

.layout-two-column {
  width: calc(50% - 20px);
}

.layout-three-column {
  width: calc(33.333% - 20px);
}

/* 拖拽悬停状态 */
.ad-item:not(.dragging):hover {
  transform: translateY(-3px);
  z-index: 10;
}

/* 广告内容容器 */
.ad-content {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 20px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  position: relative;
}

/* 拖拽手柄样式 */
.drag-handle {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: grab;
  color: #666;
  font-size: 16px;
  user-select: none;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* 拖拽手柄悬停效果 */
.drag-handle:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 拖拽进行中状态 */
.drag-handle:active {
  cursor: grabbing;
}

/* vuedraggable 视觉效果类 */

/* 占位元素样式（拖拽时显示的空位） */
.ghost {
  opacity: 0.5;
  background-color: #f0f8ff; /* 浅蓝色背景 */
}

/* 选中元素样式（被拖拽的元素） */
.chosen {
  background-color: #e8f5e9; /* 浅绿色背景 */
  box-shadow: 0 0 0 2px #4CAF50; /* 绿色边框高亮 */
}

/* 广告内容悬停效果 */
.ad-content:hover {
  background: #e8e8e8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 拖拽目标样式 */
.ad-item:not(.dragging):nth-child(n) .ad-content {
  border: 2px dashed transparent;
}

/* 广告标题样式 */
.ad-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
}

/* 布局信息样式 */
.ad-layout-info {
  font-size: 14px;
  color: #666;
  margin: 4px 0;
}

/* 位置信息样式 */
.ad-index {
  font-size: 12px;
  color: #999;
  margin: 4px 0 0 0;
}

</style>
